<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新闻</title>
        <link rel="stylesheet" href="/css/base.css">
        <link rel="stylesheet" href="/css/paegs.css">
        <link rel="stylesheet" href="/css/select.css">
        <link rel="stylesheet" href="/css/example.css">
    </head>
    <body>
        <header class="header">
            <div class="header_wrap">
                <div class="header_logo">
                    <img src="/assets/logo.png" alt="">
                </div>
                <div class="header_link">
                    <div class="header_link_content">
                        <div class="link link_baojia">
                            <img src="/assets/header_link_baojia.png" alt="产品报价">
                            <span>产品报价</span>
                            <div class="header_link_baojia_link">
                                <div class="border-up"><span></span></div>
                                <div style="overflow: hidden;height: 100%;">
                                    <a href="/baojia.html">漆面保护膜</a>
                                    <a href="/baojia.html">车身改色膜</a>
                                </div>
                            </div>
                        </div>
                        <a href="/zhibao.html" class="link">
                            <img src="/assets/header_link_zhibao.png" alt="质保查询">
                            <span>质保查询</span>
                        </a>
                        <a href="" class="link">
                            <img src="/assets/header_link_signin.png" alt="经销商登陆">
                            <span>经销商登陆</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="header_menu">
                <div class="header_menu_list">
                    <a href="/home.html" class="active">首页</a>
                    <a href="/brand.html">品牌</a>
                    <a href="/product.html">产品</a>
                    <a href="/news.html">资讯</a>
                    <a href="/example.html">案例</a>
                </div>
            </div>
        </header>
        <div class="banner">
            <img src="/assets/brand_banner.png" alt="" width="100%">
        </div>
        <div class="example_wrap">
            <div class="navigation">
                <a href="/home.html">首页</a>
                <span class="line">></span>
                <a>导航</a>
            </div>
            <div class="content">
                <div class="select">
                    <div class="select_cell" onclick="selectCar()">
                        <img src="/assets/icon_car.png" width="24" style="margin-top: 16px;">
                        <span>选择分类</span>
                        <img src="/assets/icon_car_select.png" class="select_cell_select">
                    </div>
                    <div class="select_cell" style="float: right;" onclick="selectOther()">
                        <img src="/assets/icon_car_type.png" width="28" style="margin-top: 16px;">
                        <span>选择汽车品牌及车型</span>
                        <img src="/assets/icon_car_select.png" class="select_cell_select">
                    </div>
                    <!-- 选择分类 -->
                    <div class="select_type_fixed" id="select_type_fixed" style="visibility: hidden;">
                        <div onclick="typeClick()" class="select_type_fixed_cell">漆面保护膜</div>
                        <div onclick="typeClick()" class="select_type_fixed_cell">漆面保护膜</div>
                    </div>
                    <!-- 选择汽车品牌及车型 -->
                    <div class="select_brand_fixed" id="select_brand_fixed" style="visibility: hidden;">
                        <h4 class="title">汽车品牌及车型<p>请点击选择以下分类</p></h4>
                        <!-- 请选择汽车品牌 -->
                        <div class="brand_select_wrap">
                            <div class="brand_select" onclick="selectBrand()"><span id="brand_select_name">请选择汽车品牌</span> <img src="/assets/icon_car_select_black.png" alt=""></div>
                            <div class="brand_select_fixed" id="brand_select_fixed" style="visibility: hidden;">
                                <div onclick="brandClick('宝马')" class="cell">宝马</div>
                                <div onclick="brandClick('奥迪')" class="cell">奥迪</div>
                                <div onclick="brandClick('大众')" class="cell">大众</div>
                                <div onclick="brandClick('宝马')" class="cell">宝马</div>
                                <div onclick="brandClick('宝马')" class="cell">宝马</div>
                                <div onclick="brandClick('宝马')" class="cell">宝马</div>
                                <div onclick="brandClick('宝马')" class="cell">宝马</div>
                            </div>
                        </div>
                        <h4 class="brand_name" id="brand_name">宝马</h4>
                        <div class="car_type_list">
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                            <div class="cell" onclick="carTypeClick()">
                                <img src="/assets/example_select_car.png">
                                <p class="name">S320L</p>
                            </div>
                        </div>
                        <div class="close" onclick="closeBrandFixed()">x</div>
                    </div>
                </div>
                <div class="list">
                    <a href="" class="list_cell">
                        <img src="/assets/example_car.png" alt="">
                        <h4>本田讴歌NSX</h4>
                    </a>
                    <a href="" class="list_cell">
                        <img src="/assets/example_car.png" alt="">
                        <h4>本田讴歌NSX</h4>
                    </a>
                    <a href="" class="list_cell">
                        <img src="/assets/example_car.png" alt="">
                        <h4>本田讴歌NSX</h4>
                    </a>
                    <a href="" class="list_cell">
                        <img src="/assets/example_car.png" alt="">
                        <h4>本田讴歌NSX</h4>
                    </a>
                    <a href="" class="list_cell">
                        <img src="/assets/example_car.png" alt="">
                        <h4>本田讴歌NSX</h4>
                    </a>
                    <a href="" class="list_cell">
                        <img src="/assets/example_car.png" alt="">
                        <h4>本田讴歌NSX</h4>
                    </a>
                </div>
            </div>
            <div class="page_wrap">
                <div class="pages">
                    <a class="prev"><</a>
                    <a class="page active">1</a>
                    <a class="page">2</a>
                    <a class="page">3</a>
                    <a class="page">4</a>
                    <a class="page">5</a>
                    <a class="next">></a>
                    <div class="change">
                        <span>共5页 到第</span>
                        <input type="text">
                        <span>页</span>
                        <button>确定</button>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="footer_wrap">
                <div class="list">
                    <a href="/baojia.html" class="list_cell">产品报价</a>
                    <a href="/zhibao.html" class="list_cell">质保查询 </a>
                    <a href="" class="list_cell">经销商登陆</a>
                </div>
                <span class="phone">182 0182 5141 </span>
                <span class="email">sm_711film@163.com </span>
                <div class="qrcode">
                    <img src="/assets/footer_qrcode.png" alt="">
                    <p>扫一扫，关注微信小程序</p>
                </div>
            </div>
            <div class="gov">
                Copyright © 2019-2020 711 film, All Rights Reserved
            </div>
        </footer>
        <script>
            // 选择分类
            function selectCar() {
                var visibility = document.getElementById('select_type_fixed').style.visibility
                if (visibility === 'hidden') {
                    document.getElementById('select_type_fixed').style.visibility = 'inherit'
                } else {
                    document.getElementById('select_type_fixed').style.visibility = 'hidden'
                }
                document.getElementById('select_brand_fixed').style.visibility = 'hidden'
            }
            

            // 选择车型
            function selectOther() {
                var visibility = document.getElementById('select_brand_fixed').style.visibility
                if (visibility === 'hidden') {
                    document.getElementById('select_brand_fixed').style.visibility = 'inherit'
                } else {
                    document.getElementById('select_brand_fixed').style.visibility = 'hidden'
                }
                document.getElementById('select_type_fixed').style.visibility = 'hidden'
            }

            // 选择汽车品牌
            function selectBrand () {
                var visibility = document.getElementById('brand_select_fixed').style.visibility
                if (visibility === 'hidden') {
                    document.getElementById('brand_select_fixed').style.visibility = 'inherit'
                } else {
                    document.getElementById('brand_select_fixed').style.visibility = 'hidden'
                }
            }
    
            // 分类点击
            function typeClick(name) {
                document.getElementById('select_type_fixed').style.visibility = 'hidden'
            }
            
            // 选择汽车品牌点击
            function brandClick(name) {
                document.getElementById('brand_select_fixed').style.visibility = 'hidden'
                document.getElementById('brand_select_name').innerText = name
                document.getElementById('brand_name').innerText = name
            }

            // 汽车类型点击
            function carTypeClick () {
                document.getElementById('select_brand_fixed').style.visibility = 'hidden'
            }

            function closeBrandFixed () {
                document.getElementById('select_brand_fixed').style.visibility = 'hidden'
            }
        </script>
    </body>
</html>